<template>
  <span v-if="systemArea && systemArea.id > 0">
    <app-icon
      v-if="systemArea.ico_str && systemArea.ico_str != ''"
      :value="systemArea.ico_str"
      style="margin-right: 4px;"
    />

    <template
      v-if="systemArea.style_display && systemArea.style_display == 'tag'"
    >
      <a-tag :color="systemArea.style_color">
        {{ systemArea.area_name }}
      </a-tag>
    </template>
    <template
      v-else-if="
        systemArea.style_display && systemArea.style_display == 'tag_first'
      "
    >
      <a-tag :color="systemArea.style_color">
        {{ systemArea.area_name.slice(0, 1) }}
      </a-tag>
      <span :style="{ color: systemArea.style_color }">
        {{ systemArea.area_name }}
      </span>
    </template>
    <template
      v-else-if="
        systemArea.style_display && systemArea.style_display == 'weight'
      "
    >
      <a-tag :color="systemArea.style_color">
        {{ systemArea.weight }}
      </a-tag>
      <span :style="{ color: systemArea.style_color }">
        {{ systemArea.area_name }}
      </span>
    </template>
    <template v-else>
      <span :style="{ color: systemArea.style_color }">
        {{ systemArea.area_name }}
      </span>
    </template>

    <span v-if="systemArea.status == 0" style="color: #999; font-size: 12px;">
      [{{ systemArea.status_show }}]
    </span>
  </span>
</template>

<script>
import systemAreaType from "@/api/systemAreaType"
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          id: 0,
        }
      },
    },
    code: {
      type: [String, Number],
      default: () => {
        return null
      },
    },
    value: {
      type: [Number, String],
      default: null,
    },
  },
  data() {
    return {
      systemAreaType: undefined,
      treeData: undefined,
      mapData: undefined,
      systemArea: {
        ...this.data,
      },
    }
  },
  watch: {
    code() {
      this.getSystemArea()
    },
    value() {
      this.getSystemArea()
    },
  },
  mounted() {
    this.getSystemArea()
  },
  methods: {
    getSystemArea() {
      if (
        (!this.$func.isString(this.code) || !this.code) &&
        (!this.$func.isNumber(this.code) || this.code <= 0)
      ) {
        return
      }
      if (
        (!this.$func.isString(this.value) || !this.value) &&
        (!this.$func.isNumber(this.value) || this.value <= 0)
      ) {
        return
      }

      systemAreaType.cache(this.code).then((response) => {
        if (response.code !== 1 || !response.data) {
          return
        }
        this.systemAreaType = response.data.data_type
        this.treeData = response.data.data_menu
        this.mapData = response.data.data_map

        if (Object.prototype.hasOwnProperty.call(this.mapData, this.value)) {
          this.systemArea = this.mapData[this.value]
          return
        }
        if (this.systemAreaType.data_type === 0) return
        for (var i in this.treeData) {
          if (this.treeData[i].data_value == this.value) {
            this.systemArea = this.treeData[i]
            return
          }
        }
      })
    },
  },
}
</script>

<style lang="less" type="text/less" scoped></style>
